<template>
  <div class="w-full flex flex-col gap-4">
    <div class="flex items-center gap-4">
      <guat-button-group :buttons="[{ text: '选择成员' }]" />
      <span>当前已选择 {{ number ?? 4 }} 名成员</span>
    </div>
    <a-table
      row-key="userNo"
      :columns="selectMemberTable"
      :data
      :row-selection="{ type: 'checkbox' }"
      :pagination="{ pageSize: 8 }"
      v-model:selected-keys="selectedKeys"
    />
  </div>
</template>

<script setup lang="ts">
import { selectMemberTable } from "../../table";

defineProps<{
  number?: number;
}>();

const selectedKeys = defineModel<string[]>("selectedKeys");

const data = [
  { userNo: "2022070030101", userName: "史伟超", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030102", userName: "杨敏", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030103", userName: "何敏文", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030104", userName: "张洋阳", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030105", userName: "吴梦娜", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030106", userName: "江军", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030107", userName: "胡小娟", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030108", userName: "贺礼杰", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030109", userName: "邱娜", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030110", userName: "朱艳", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030110", userName: "朱艳", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030110", userName: "朱艳", userClass: "2022级-软件工程-1班" },
  { userNo: "2022070030110", userName: "朱艳", userClass: "2022级-软件工程-1班" },
];
</script>

<style scoped></style>
